<template>
  <div>
    <van-nav-bar
      title="标题"
      left-text="返回"
      left-arrow

    />
    <van-card
      desc="买一送一"
      title="商家名"
      thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
    />
    <van-tree-select
      :v-model:active-id="activeId"
      :v-model:main-active-index="activeIndex"
      :items="items"
    />

    <van-tabbar v-model="active1">
      <van-tabbar-item icon="home-o">标签</van-tabbar-item>
      <van-tabbar-item icon="search">标签</van-tabbar-item>
      <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
      <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  setup() {
    const activeId = ref([1, 2]);
    const activeIndex = ref(0);
    const items = [
      {
        text: "浙江",
        children: [
          { text: "杭州", id: 1 },
          { text: "温州", id: 2 },
        ],
      },
      {
        text: "江苏",
        children: [
          { text: "南京", id: 5 },
          { text: "无锡", id: 6 },
        ],
      },
    ];

    return {
      items,
      activeId,
      activeIndex,
    };
  },
  setup() {
    const active1 = ref(0);
    return { active1 };
  },
};
</script>

<style>
.van-nav-bar {
  background-color: #ffffff;
  height: 70px;
}
.aa {
  width: 100%;
  background-color: #f1f8fe;
}
.shang {
  /* height: 100px; */
  margin: 20px;
}
.ab {
  width: 100px;
}
</style>